<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-form :inline="true" class="form">
        <el-form-item label="学科名称">
          <el-input v-model="query.subjectName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="clear" size="small">清除</el-button>
          <el-button type="primary" @click="search" size="small">搜索</el-button>
        </el-form-item>
        <el-button @click="addSub" type="success" size="small" class="addbtn">
          <i class="el-icon-edit"></i>
          新增学科</el-button
        >
      </el-form>
      <el-alert :title="`数据一共${total}条`" type="info" v-model="total" show-icon :closable="false"> </el-alert>
      <el-table :data="list" style="width: 100%">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="subjectName" label="学科名称"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="150">
          <template #default="{row}">
            {{ formatTime(row.addDate) }}
          </template>
        </el-table-column>
        <el-table-column
          :formatter="formatFreeShippingInfo"
          prop="isFrontDisplay"
          label="前台是否显示"
          width="141"
        >
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录"> </el-table-column>
        <el-table-column prop="tags" label="标签"> </el-table-column>
        <el-table-column prop="totals" label="题目数量"> </el-table-column>
        <el-table-column label="操作" width="250">
          <template v-slot="scope">
            <el-button type="text" @click="dir(scope.row)">学科分类</el-button>
            <el-button type="text" @click="tag(scope.row)">学科标签</el-button>
            <el-button type="text" @click="updateList(scope.row)">修改</el-button>
            <el-button type="text" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="sizechange"
        @current-change="pageChange"
        :current-page="query.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="query.paegsize"
        layout=" prev, pager, next, sizes, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- <subjects-add :visible="dialogVisible" @close-dialog="close" @update-list="getList" /> -->
      <el-dialog :title="text" :visible="dialogVisible" width="30%" :before-close="close">
        <el-form ref="Form1" :model="addForm" :rules="rules" label-width="100px">
          <el-form-item label="学科名称" prop="subjectName">
            <el-input v-model="addForm.subjectName" placeholder="请输入学科名称" />
          </el-form-item>
          <el-form-item label="是否显示" prop="isFrontDisplay">
            <el-switch
              v-model="addForm.isFrontDisplay"
              :active-value="1"
              :inactive-value="0"
              active-color="green"
              inactive-color="red"
            ></el-switch>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { list, update, detail, remove, add } from '@/api/hmmm/subjects.js'
// import SubjectsAdd from '@/module-hmmm/components/subjects-add'
export default {
  name: 'Subjects',
  // components: {
  //   SubjectsAdd
  // },
  data () {
    return {
      list: [],
      query: {
        page: 1,
        pagesize: 10,
        subjectName: ''
      },
      dialogVisible: false,
      total: 0,
      addForm: {
        subjectName: '',
        isFrontDisplay: 1
      },
      rules: {
        subjectName: [{ required: true, message: '学科名称不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 获取列表
    async getList () {
      const res = await list(this.query)
      this.list = res.data.items
      this.total = res.data.counts
    },
    // 添加
    addSub () {
      this.addForm = {
        subjectName: '',
        isFrontDisplay: 1
      }
      this.dialogVisible = true
    },
    // 关闭对话框
    close () {
      this.dialogVisible = false
    },
    // 清除输入框
    clear () {
      this.query.subjectName = ''
      // this.query.s
      this.getList()
    },
    // 搜索
    search () {
      this.getList()
    },
    // 点击修改获取详情
    async updateList (id) {
      const res = await detail(id)
      this.addForm = res.data
      this.dialogVisible = true
    },
    // 删除
    del (id) {
      this.$confirm('此操作将永久删除学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 2. 调用删除接口
          await remove(id)
          this.$message.success('删除学科成功')
          this.getList()
        })
        .catch()
    },
    // 改变了每页数据条数的时候，触发这个事件
    sizechange (newSize) {
      // 得到最新的，每页显示newSize条数据
      this.query.pagesize = newSize
      this.query.page = 1
      // 调用获取文章的方法，重新使用新的参数发送请求，获取数据，更新页面
      this.getList()
    },
    // 页码改变的时候，触发的事件
    pageChange (newPage) {
      this.query.page = newPage
      this.getList()
    },
    // 转换时间
    formatTime (value) {
      return dayjs(value).format('YYYY/MM/DD hh:mm:ss')
    },
    // element ui表格数据0 1转换为是否
    formatFreeShippingInfo (row) {
      return row.isFrontDisplay === '1' ? '是' : '否'
    },
    // 兜底校验
    confirm () {
      this.$refs.Form1.validate(async valid => {
        if (valid) {
          if (this.addForm.id) {
            await update(this.addForm)
            this.$message.success('修改成功')
          } else {
            await add(this.addForm)
            this.$message.success('添加成功')
          }
          this.$message.success(`${this.addForm.id ? '修改成功' : '新增成功'}`)
          this.dialogVisible = false
          this.getList()
          this.$refs.Form1.resetFields() // 重置表单
          // 清空数据
          this.addForm = {
            subjectName: ''
          }
        }
      })
    },
    // 跳转到目录页
    dir (obj) {
      this.$router.push({
        path: '/subjects/directorys',
        query: {
          id: obj.id,
          name: obj.subjectName
        }
      })
    },
    // 跳转到标签页
    tag (obj) {
      this.$router.push({
        path: '/subjects/tags',
        query: {
          id: obj.id,
          name: obj.subjectName
        }
      })
    }
  },
  // 弹出框的标题动态变化
  computed: {
    text () {
      return this.addForm.id ? '修改学科' : '新增学科'
    }
  },
  created () {
    this.list = []
  },
  mounted () {
    this.getList()
  }
}
</script>

<style scoped>
.app-container {
  background-color: #fff;
}
.app-container .form {
  position: relative;
}
.app-container .form .addbtn {
  position: absolute;
  right: 0;
  top: 0;
}
.dashboard-container .el-pagination {
  margin-top: 20px;
  text-align: right;
}
.el-alert {
  margin-bottom: 15px;
}
</style>
